<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2023/10/25
  Time: 15:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--引入jstl核心库--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="com.kfm.util.Constant" %>
<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap4.6.2.css">
    <script src="../js/jquery-3.3.1.slim.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <style>
        td {
            width: 150px;
        }
    </style>
</head>
<body>
hello
<%--test 条件 true/false ${条件表达式}--%>
<c:if test="${result !=null}">
    <%----%>
    <script>
        window.alert(" ${result.data.lastName}, ${result.msg}");
    </script>
    <%
        // 删除session中的属性
        request.getSession().removeAttribute(Constant.MESSAGE_KEY);
    %>
</c:if>
<%--items 要遍历的对象（容器）--%>
<%--for (KfmUser u : list) {}--%>
<table border="1" cellpadding="1">
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>入职日期</th>
        <th>职位</th>
        <th>工资</th>
        <th>奖金</th>
        <th>操作</th>
    </tr>
    <c:forEach items="${all}" var="emp" varStatus="state">
        <%--count 1 开始计数--%>
        <%--index 0 开始计数--%>
    <tr>
            <%--    index: ${state.index}--%>
        <td>${state.count}</td>
        <td>${emp.firstName.concat(emp.lastName)}</td>
        <td>${emp.startDate}</td>
        <td>${emp.title}</td>
        <td>${emp.salary}</td>
        <td>
            <c:if test="${emp.commissionPct == null}">
                暂无
            </c:if>
            <c:if test="${emp.commissionPct != null}">
                ${emp.commissionPct}
            </c:if>
        </td>
        <td>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"
                    data-whatever="${emp}" data-link="/emp?type=edit&id=${emp.}">修改
            </button>
            <a href="/emp?type=delete&id=${emp.id}">删除</a>
        </td>
    <tr>
        </c:forEach>

        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form action="/emp">
                            <div class="form-group row">
                                <label for="firstName" class="col-sm-2 col-form-label">firstName</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="firstName">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="lastName" class="col-sm-2 col-form-label">lastName</label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control" id="lastName">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Send message</button>
                    </div>
                </div>
            </div>
        </div>

        <script>
            $('#exampleModal').on('show.bs.modal', function (event) {
                let button = $(event.relatedTarget) // Button that triggered the modal
                let emp = JSON.stringify(button.data('whatever')) // Extract info from data-* attributes
                let modal = $(this)
                modal.find('.modal-title').text(emp.id)
                modal.find('#firstName').val(emp.firstName)
                modal.find('#lastName').val(emp.lastName)
                // modal.find('.modal-body input').val(recipient)
            })
        </script>
</table>
</body>
</html>
